Edukon Documentation

Getting Started

Welcome

Thanks for purchasing our template :)

It is our great pleasure that you purchased our template. And we want to tell you that you don't need to write any codes for this template. Just follow some instructions for customizing the template.

Features

  • 7 Home Pages
  • Total 16+ HTML Files
  • Fully responsive
  • Clear & Neat design
  • Bootstrap Based
  • Icofonts Icon
  • Nice portfolio and Blog
  • Smooth animation
  • Browser compatibility (IE10+, Chrome, Safari, Firefox, Opera)
  • Well documented

Folder Arrange

Unzip the archive and find out the folder "buyer-file". There are all the template files in this folder. You can open the following files for your customization.

  1. assets/css — folder with CSS files.
  2. assets/fonts — folder with icon fonts.
  3. assets/images — folder with image files.
  4. assets/js — folder with JAVASCRIPT files.

  5. index.html — Home Page.
  6. about.html — About us Page.
  7. blog.html — Blog Page.
  8. blog-single.html — Blog Single Page.

  9. and Some other HTML Files
  10. .

Installation

01. FTP Upload

  • Open Your FTP manager and connect to your hosting
  • Browse to required directory(Normally public_html)
  • Upload the files inside buyer-file folder
  • That's all !

02. All HTML Pages

html

03. Fonts

Go to Google Fonts and select your favorite fonts and then just replace the code.

	<@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500;600;700;800;900&display=swap');
					

05. Source File (CSS)

All required css files have been linked like below-

		<link rel="stylesheet" href="assets/css/animate.css">
	    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
	    <link rel="stylesheet" href="assets/css/icofont.min.css">
	    <link rel="stylesheet" href="assets/css/swiper.min.css">
	    <link rel="stylesheet" href="assets/css/lightcase">
	    <link rel="stylesheet" href="assets/css/style.min.css">
    

06. Source File (JS)

All required css files have been linked like below. if you need any customization in JAVASCRIPT you have to edit the function.js file.

		 
		<script src="assets/js/jquery.js"></script>
	    <script src="assets/js/bootstrap.min.js"></script>
	    <script src="assets/js/swiper.min.js"></script>
	    <script src="assets/js/progress.js"></script>
	    <script src="assets/js/lightcase"></script>
	    <script src="assets/js/counter-up.js"></script>
	    <script src="assets/js/isotope.pkgd.js"></script>
	    <script src="assets/js/functions.js"></script>
    

This is logo and navigation codes.

	<div class="menu">
        <ul class="lab-ul">
            <li>
                <a href="#0">Home</a>
                <ul class="lab-ul">
                    <li><a href="index.html" class="active">Home One</a></li>
                    <li><a href="index-2.html">Home Two</a></li>
                    <li><a href="index-3.html">Home Three</a></li>
                    <li><a href="index-4.html">Home Four</a></li>
                    <li><a href="index-5.html">Home Five</a></li>
                    <li><a href="index-6.html">Home Six</a></li>
                    <li><a href="index-7.html">Home Seven</a></li>
                </ul>
            </li>
            
            <li>
                <a href="#0">Courses</a>
                <ul class="lab-ul">
                    <li><a href="course.html">Course</a></li>
                    <li><a href="course-single.html">Course Details</a></li>

                </ul>
            </li>
            <li>
                <a href="#0">Blog</a>
                <ul class="lab-ul">
                    <li><a href="blog.html">Blog Grid</a></li>
                    <li><a href="blog-2.html">Blog Style 2</a></li>
                    <li><a href="blog-3.html">Blog Style 3</a></li>
                    <li><a href="blog-single.html">Blog Single</a></li>
                </ul>
            </li>
            <li>
                <a href="#0">Pages</a>
                <ul class="lab-ul">
                    <li><a href="about.html">About</a></li>
                    <li><a href="team.html">Team</a></li>
                    <li><a href="instructor.html">Instructor</a></li>
                    <li>
                        <a href="#0">Shop Pages</a>
                        <ul class="lab-ul">
                            <li><a href="shop.html">Shop Page</a></li>
                            <li><a href="shop-single.html">Shop Details Page</a></li>
                            <li><a href="cart-page.html">Shop Cart Page</a></li>
                        </ul>
                    </li>
                    <li><a href="search-page.html">Search Page</a></li>
                    <li><a href="search-none.html">Search None</a></li>
                    <li><a href="404.html">404</a></li>
                </ul>
            </li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    					

Here is your main logo code. To add your logo, replace logo.png from images/logo/ directory with your logo in PNG format.

    <a href="index.html"><img src="assets/images/logo/01.png" alt="logo"></a>
            
Note: Keep your logo inside the ./assets/images/logo folder. The logo size should be maximum 200x60 pixel.

To change the menu name you will need to edit in the tag <li><a href="#">menu name </a> </li> and add your text in the middle of the tag.



Section Styles

Here is your section structure.

<section class="xyz-section padding-tb">
    <div class="container">
        <div class="section-header">
          ....
        </div>
        <div class="section-wrapper">
            <div class="row">
              ....
            </div>
        </div>
    </div>
</section>
    

In the class="xyz-section" you can replace with your desired class.

the class padding-tb is the space between each sections.

And in the section-header div you can add your heading of sections and tagline of sections.

You can add your content on the 2nd .section-wrapper div.


Utility Classes

You can use next modification classes to set block margins and paddings:


margin-top

mt-1 ... mt-5

margin-bottom

mb-1 ... mb-5

padding-top

pt-1 ... pt-5

padding-bottom

pb-1 ... pb-5



You Can Change Your Copyright text by changing footer sections copyright part like below-

	<p>© 2021 <a href="index.html">Edukon</a> Designed by <a href="https://themeforest.net/user/CodexCoder" target="_blank">CodexCoder</a> </p>
    					

09. Change Contact form mail

You Can Change Contact form mail address with your desire one with by changing the email address in contact.php file -


    // FIXME: Update this to your desired email address.
    $recipient = "yourgmail@gmail.com";